<template>
  <!-- 运费管理 -->
  <div class="IAC-container">
    <div class="IAC-row">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-button class="newly-button" @click="isShowDialog = true">新增模板</el-button>
          <div class="grid-content">

            <el-table :data="dapts" stripe style="width: 100%" border>

              <el-table-column label="模板类型">
                <template slot-scope="{row}">
                  <span v-if="row.templateType === 1">同城寄</span>
                  <span v-else-if="row.templateType === 2">省内寄</span>
                  <span v-else-if="row.templateType === 3">经济区互寄</span>
                  <span v-else>跨省</span>
                </template>
              </el-table-column>

              <el-table-column label="运输类型">
                <template slot-scope="{row}">
                  {{ row.transportType === 1 ? '普快' : '特快' }}
                </template>
              </el-table-column>

              <el-table-column label="关联城市">
                <template slot-scope="{row}">
                  <span v-if="row.associatedCityList[0] == 1">全国</span>
                  <span v-if="row.associatedCityList[0] == 2">京津冀</span>
                  <span v-if="row.associatedCityList[0] == 3">江浙沪</span>
                  <span v-if="row.associatedCityList[0] == 4">川渝</span>
                  <span v-if="row.associatedCityList[0] == 5">黑吉辽</span>
                </template>
              </el-table-column>
              <el-table-column prop="firstWeight" label="首重" />
              <el-table-column prop="continuousWeight" label="续重" />
              <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" />

              <el-table-column label="操作">
                <template slot-scope="{row}">
                  <el-button class="del-button-texts" type="text" size="small" @click="handleClick(row.id)">编辑</el-button>
                  <span class="dels-button-text" >|</span>
                  <el-button class="del-button-text" type="text" size="small" @click="del(row.id)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>

          </div>
        </el-col>
      </el-row>
    </div>
    <IacPage 
      :isShowDialog.sync="isShowDialog" 
      @updatecarriages="carriagesList"
      :isShowId="isShowId"
    />
      <!-- :isShowId="isShowId" -->
  </div>
</template>

<script>
import { delCarriages, getCarriages } from '@/api/essential'
// import Footer from '@/components/Footer/FooterName.vue'
import IacPage from './component/iac.vue'
export default {
  components: { IacPage },
  // Footer }
  data() {
    return {
      dapts: [],
      isShowDialog: false,
      isShowId: ''
    }
  },
  created() {
    this.carriagesList()
  },
  methods: {
    async carriagesList() {
      const res = await getCarriages()
      // console.log(res, ' 获取运费模板列表')
      this.dapts = res.data.data
    },
    handleClick(id) {
      this.isShowId = id
      this.isShowDialog = true
    },
    async del(id) {
      console.log(id, 999)
      await delCarriages(id)
      this.$message.success('删除成功')
      this.carriagesList()
    }
  }
}
</script>

<style lang="scss" scoped>
.IAC-container{
  padding: 20px 20px 0 20px;
  // margin-bottom: 20px;

  .IAC-row{
    padding: 25px;
    background: #fff;
    .el-row {
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .newly-button {
      background-color: #e15536;
      color: #fff;
      margin-bottom:20px
    }

    .el-button--text:nth-child(3) {
      color: red !important;
      
    }
    .del-button-texts,
    .el-button--text:nth-child(3){
      text-align: center; 
    }

    .dels-button-text {
      margin: 0 10px;
    }

  }
}
</style>
